<template>
  <router-view></router-view>
  <van-tabbar v-model="active" @change="onChange">
    <van-tabbar-item icon="home-o">
      首页
    </van-tabbar-item>
    <van-tabbar-item icon="cart-o">
      订单
    </van-tabbar-item>
    <van-tabbar-item icon="apps-o">
      其他
    </van-tabbar-item>
    <van-tabbar-item icon="contact">
      我的
    </van-tabbar-item>
  </van-tabbar>
</template>
<script setup>
import {
  ref,
  reactive,
  computed
} from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
const router = useRouter()
const store = useStore()
const active = computed({
  get () {
    return store.state.activeTabBar
  },
  set (val) {
    setActive(val)
  }
})
const setActive = (val) => {
  store.commit('SET_ACTIVE_TABBAR', val)
}
const onChange = (idx) => {
  if (idx === 0) {
    router.push('/')
  } else if (idx === 1) {
    router.push('/order')
  } else if (idx === 2) {
    router.push('/other')
  } else {
    router.push('/mine')
  }
}

</script>
<style>
body {
  width: 100vw;
  height: 100vh;
}

.ys-float-btn {
  color: #666;
  z-index: 2000;
  transition: all 0.3s;
  position: fixed;
  bottom: 20vw;
  width: 120px;
  white-space: nowrap;
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  height: 100%;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>
